//导入共享数据包
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

var socket = null

Page({

    //vant组件样式覆盖
    //共享数据相关配置
    options: {
        styleIsolation: 'shared'
    },
    
    behaviors: [storeBindingsBehavior],

    //引入需要的共享数据
    storeBindings: {
        store,
        fields: {
            chatDto: 'chatDto',
            token: 'token'
        },
        actions: {
            updateChatDto: 'updateChatDto'
        }
    },

    /**
     * 页面的初始数据
     */
    data: {
        //好友列表
        friendsList: [],
        //节流阀
        isLoading: false,

        //聊天数据列表
        chatList: []
    },

    //WebSocket消息通知方法
    MessageWebSocket() {
        socket.send({
            data: '{"sid":"'+ store.chatDto.userFriendId +'","message":"啦啦啦"}',
            success: (res) => {
                console.info('客户端发送成功');
            }
        });
    },

    //导航到聊天页面
    navigateToChat(e) {
        console.log(e)
        this.updateChatDto(e.target.dataset.targetuser)
        wx.navigateTo({
            url: '/pages/chat/chat',
          })
    },

    //加载好友列表方法
    loadFriendsList(cb) {
        
        //判断用户是否登录
        if(!store.token) {
            wx.showToast({
                title: '用户未登录！',
                icon: 'error'
              })
            return
        }

        //设置节流阀
        this.setData({
            isLoading: true
        })


        //发送后端请求
        wx.request({
          url: `${store.programURL}/chat/getFriendsList`,
          method: 'GET',
          header: {
            authentication: store.token
          },
          success: (res) => {
            console.log(res)
            this.setData({
                friendsList: res.data.data
            })
          },
          complete:() => {
            //更新节流阀
            this.setData({isLoading: false})
          }
        })
        cb && cb()
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.onShow()

        //未登录 不创建WebSocket
        if(!store.token) {
            return
        }

        socket = wx.connectSocket({
            url: `ws://localhost:8880/webSocket/${store.userInfo.id}`,
            success: (res) => {
                console.info(res);
            }
        })

        //开启事件监听
        socket.onOpen(function () {
            console.info('连接打开成功');
        })
        socket.onClose(function () {
            console.info('连接关闭成功');
        })
        socket.onError(function () {
            console.info('连接报错');
        })
        socket.onMessage((e) => {
            console.info('收到来自服务端的消息！')
            console.info(e)
            this.loadFriendsList()
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        //加载好友列表
        this.loadFriendsList()
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        //判断用户是否登录
        if(!store.token) {
            wx.showToast({
                title: '用户未登录！',
                icon: 'error'
              })
            this.setData({
                chatList: []
            })
            return
        }
        this.loadFriendsList()
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        wx.closeSocket()
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        //判断节流阀
        if(this.data.isLoading) return

        /*
        这里参考了黑马老师的写法，在加载文章方法中手写了一个回调函数
        为了让数据加载完成就把下拉动作取消，如果不这样会导致数据加载
        完了，下拉框却还没上去
        */
        this.loadFriendsList(() => {
            wx.stopPullDownRefresh()
        })
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})